<template>
  <div class="subMenu">
    <div v-for="route in sideMenu" :key="route.index" >
      <!-- 嵌套菜单 -->
      <el-submenu index="3"
          v-if="route.children&&route.children.length>0">
        <template slot="title">
          <i>图标</i>
          <span>厂库管理</span>
        </template>

      <!-- 嵌套在subMenu中使用 -->
        <el-menu-item-group>
         <sub-menu :sideMenu="route.children"></sub-menu>
        </el-menu-item-group> 
      </el-submenu>
      <!-- 一级菜单 -->
      <el-menu-item v-else @click="t(route)" :index="route.meta.fullPath">
        <i :class="route.meta['icon']?route.meta['icon']:''"></i>
        <span slot="title">{{route.meta.name}}</span>
      </el-menu-item>
    </div>
  </div>
</template>
<script>
export default{
    name:"sub-menu",
    props:{
        sideMenu:{//接收的参数是一个符合routes配置选项的数组
            type:Array,
            required:true,
            default:()=>[]
        }
    },
    methods:{
     t(route){
       console.log(route);
        //判断route的meta属性中有没有fullPath属性
        //在展示中绑定：route="true"
        // $parent.route.meta['fullPath']
        // console.log($parent.route.meta['fullPath']+route.meta['fullPath']);
        if(route.meta['fullPath']){
          return 
        }
        console.log(route.name);
        //做了两手准备 必须有fullPath或者name其中之一 不然不合法
        this.$router.push({name:route.name})
      }
    },
    mounted(){
        console.log(this.sideMenu);
    }
}
</script>